<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">购买视频展示页面</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="2" v-for="(o, index) in listData" :key="index" :offset="1">
        <el-card :body-style="{ padding: '10px 10px',margin:'20px 10px' }" style="width: 160px;height: 340px;">
          <el-image class="image" style="width: 100px; height: 100px" :src="imageTemp"
                    :preview-src-list="o.img | filterImg"/>  <!--需要图片过滤器-->
          <div style="padding: 14px;">
            <span style="font-size: 10px;">{{ o.cname }}</span>
            <div class="bottom clearfix"
                 style="position:absolute; bottom:40px;padding: 0px 50px 0px 0px;margin: 0px 50px 0px 0px;">
              <time class="time">￥{{ o.cprice }}</time>
              <router-link :to="{path:'buyerCarDetails',query:{cid:o.cid}}">
                <el-button type="text" class="button" style="position: absolute;right: 0px">购买</el-button>
              </router-link>

            </div>
          </div>
        </el-card>
        <br>
      </el-col>
    </el-row>
  </div>


</template>

<script>
// import { deptList, deptSave, deptDelete } from '../../api/userMG'
export default {
  data() {
    return {
      currentDate: new Date(),
      listData: [], //二手车数据
      imageTemp: 'http://192.168.17.130:8080/image/imageLose.jpg',

    }
  },
  created() {
    this.getdata();
  },
  filters: {
    // 图片预览过滤
    filterImg(item) {
      if (typeof item === "string") {
        return item.split("|");
      } else {
        return item
      }
    },
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {

    // 获取公司列表
    getdata() {
      // 表格加载开始
      const _this = this;

      let res;
      axios.get(localStorage.getItem("globalUrl") + "course/findAllByCStatus").then(function (resp) {
        _this.listData = resp.data.data;

        // 表格加载结束
        _this.loading = false
      });


    },

  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

